<style lang="scss" scoped>
.info-user{background-color: var(--color-primary);background-image: url("//taiyushangdao-saas.oss-cn-chengdu.aliyuncs.com/uploads/2024/1117/112255219507.png");background-size: 100%;
  .inner{padding: 20px;}
  .head_img{width: 60px;height: 60px;border-radius: 50%;overflow: hidden;background-color: var(--color-bg-0);}
  .info{padding-left: 20px;
    h3{font-size: 20px;font-weight: bold;}
    .sm{opacity: 0.5;}
  }
  .van-icon{opacity: 0.5;font-size: 24px;}
}
</style>
<template>
  <div class="info-user">
    <div class="inner flex"  @click="href_handle('/user/info')">
      <div class="head_img">
        <img-referrer :src="head_img" alt=""/>
      </div>
      <div class="info max">
        <h3>{{nickname}}</h3>
        <p class="sm">{{phone}} | {{level_name}}</p>
      </div>
      <van-icon name="arrow"/>
    </div>
  </div>
</template>

<script>

import {to_string} from "@/js/s94_tool.js";
import {href_handle} from "@/vue_plugin/router_auto.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

/**
 * @prop {*}
 */
export default {
  components: {ImgReferrer},
  _title_: '用户信息卡片',
  _tip_: '子板块会渲染到底部，子组件的$info继承当前组件的$info',
  _head_img_: '',
  _group_: '详情组件',
  props:{
    head_img: {
      type: [String,Number],
      _label_: '头像',
      _tip_: '',
      _required_: true,
      _default_: "this_user('head_img')",
      _input_type_: 'file_img',
    },
    nickname: {
      type: [String,Number],
      _label_: '昵称',
      _tip_: '',
      _required_: true,
      _default_: "this_user('nickname')",
    },
    phone: {
      type: [String,Number],
      _label_: '电话',
      _tip_: '',
      _default_: "this_user('phone')",
    },
    level_name: {
      type: [String,Number],
      _label_: '等级标题',
      _tip_: '',
      _default_: "this_user('level_name')",
    },
  },
  data(){
    return {}
  },
  methods:{
    href_handle
  },
  computed:{
    thisData(){
      return{
        title: to_string(this.title),
      }
    }
  },
  mounted(){
  }
}
</script>